import React ,{Component} from 'react'
import {
    Card,
    Select,
    Input,
    Button,
    Icon,
    Table,
    message
  } from 'antd'

  import {PAGE_SIZE} from '../../utils/constants'
  import LinkButton from '../../components/link-button'
  import {reqProducts,reqSearchProducts,reqUpdateStatus} from '../../api'
//import memoryUtils from '../../utils/memoryUtils' hash
  

  const Option = Select.Option;


//Product的默认子路由组件
export default class ProductHome extends Component{

     state ={
        products:[],  // 商品的数组
        total: 0, // 商品的总数量
        loading: false, // 是否正在加载中
        searchName: '', // 搜索的关键字
        searchType: 'productName', // 根据哪个字段搜索
     }

     /*
  初始化table的列的数组
   */
  initColumns = () => {
    this.columns = [
      {
        title: '商品名称',
        dataIndex: 'name',
      },
      {
        title: '商品描述',
        dataIndex: 'desc',
      },
      {
        title: '价格',
        dataIndex: 'price',
        render: (price) => '¥' + price  //dataIndex 当前指定了对应的属性, 传入的是对应的属性值
      },
      {
        width: 100,
        title: '状态',
        //dataIndex: 'status',
        render:(product)=>{
            const {status,_id} = product
            const newStatus = status===1 ? 2: 1;
            return(
              <span>
                 {/*  点击 下架 上架 修改商品的状态(在售/已下架)*/}
                <Button type='primary' onClick={()=>this.updateStatus(_id,newStatus)}>{status===1?'下架':'上架'}</Button>
                <span>{status ===1 ? '在售':'已下架'}</span>
              </span>
            )
        }
      },
      {
        width: 100,
        title: '操作',
        render:(product)=>{
            return(
              <span>
               {/*将product对象使用state传递给目标路由组件*/}
               {/* hash <LinkButton onClick={()=>this.showDetail(product)}>详情</LinkButton>
                 <LinkButton onClick={()=>this.showUpdate(product)}>详情</LinkButton> */}
                 {/* BrowserRouter 路由  */}
                <LinkButton onClick={()=>this.props.history.push('/product/detail',{product})}>详情</LinkButton> 
                <LinkButton onClick={() => this.props.history.push('/product/addupdate', product)}>修改</LinkButton>
              </span>
            )
        }
      },
    ];
   }

   // hash
  //  showDetail =(product)=>{
  //   // 缓存 product 对象 给 detail 页面用
  //   memoryUtils.product = product
  //   this.props.history.push('/product/detail')
  //  }

   // hash
  //  showUpdate =(product)=>{
  //   // 缓存 product 对象 给 detail 页面用
  //   memoryUtils.product = product
  //   this.props.history.push('/product/addupdate')
  //  }

   // 更新指定商品的状态
   updateStatus=async (productId, status)=>{
      const res = await reqUpdateStatus(productId,status)
      if(res.status===0) {
        message.success('更新商品成功')
        this.getProducts(this.pageNum)
      }
   }

    /*
  获取指定页码的列表数据显示
   */
   getProducts = async (pageNum) => {
       this.pageNum = pageNum // 保存pageNum, 让其它方法可以看到 在第3页更改状态后不会跳到 第1页去
       this.setState({loading: true}) // 显示loading
       const {searchType,searchName} = this.state;
       // 如果搜索关键字有值, 说明我们要做搜索分页
       let res;
       if(searchName){
          res = await reqSearchProducts({pageNum, pageSize:PAGE_SIZE, searchName, searchType})
       }else{// 一般分页请求
          res = await reqProducts(pageNum,PAGE_SIZE)
       }
       console.log('33333',res);
       this.setState({loading: false}) // 隐藏loading
       if(res.status===0){
          // 取出分页数据, 更新状态, 显示分页列表
          const {total,list } = res.data;
          this.setState({
              total,
              products:list
          })
       }
    }


     componentWillMount () {
        this.initColumns()
      }

      componentDidMount () {
        this.getProducts(1)
      }

     render(){

     // 取出状态数据  , 
     const {products,total,loading,searchType,searchName } = this.state
    
     const title =(
       <span>
         <Select value= {searchType} style={{width: 150}} 
            onChange={ value=>this.setState({searchType:value})}>
            <Option value='productName'>按名称搜索</Option>
            <Option value='productDesc'>按描述搜索</Option>
         </Select>
         <Input placeholder='关键字' style={{width: 150, margin: '0 15px'}} 
         value={searchName} onChange={ event=>this.setState({searchName:event.target.value})} />
         <Button type='primary' onClick={() => this.getProducts(1)}>搜索</Button>
       </span>
     )

     const extra =(
        <Button type='primary' onClick={() => this.props.history.push('/product/addupdate')}>
          <Icon type='plus'/>
          添加商品
      </Button>
     )
      //loading={loading}
      return (
         <Card title={title} extra={extra}>  
             <Table bordered   rowKey='_id' loading={loading}
               dataSource={products}  columns={this.columns}
               pagination={{
                   current:this.pageNum, // 在第3页 搜索  刷新跳到第一页去
                   defaultPageSize:PAGE_SIZE,
                   showQuickJumper: true,
                   total,
                   onChange: this.getProducts
               }}
              />
               {/* onChange:(pageNum)=>{ this.getProducts(pageNum) }  后端分页 前端分页一次给全部数据 */ }
         </Card>
      )
    }
}